import { getUserinfoApi } from "@/api";
import { UserType } from "@/types";
import { View } from "@tarojs/components";
import { useLoad } from "@tarojs/taro";
import { useState } from "react";
import { Avatar, Button } from "@taroify/core";
import { Plus, Cross } from "@taroify/icons";

export default ({ id }) => {
  const [user, setUser] = useState<UserType>();
  useLoad(() => getUserinfoApi(id).then(setUser));
  return (
    <View className="py-2 mx-2 bg-gradient-to-r from-[#F1FBFD] to-[#FBF1FC] flex justify-between items-center">
      <View className="flex gap-2 items-center">
        <Avatar src={user?.avatar} size="small" />
        <View className="text-sm text-gray-500">
          关注TA及时收到TA的消息提醒
        </View>
      </View>
      <View className="flex gap-2 items-center">
        <Button
          className="w-14"
          size="mini"
          variant="contained"
          color="primary"
          icon={<Plus />}
          shape="round"
        >
          关注
        </Button>
        <Cross color="#D2CFD5" />
      </View>
    </View>
  );
};
